<template>
  <div class="photo2-main">
    <template v-for="(item, index) in rightImgList">
      <img :src="item.isUrl" alt="" :key="index" @click="onImageFn(item, index)">
    </template>
    <ElImageViewer
            :isImageData="isImageData"
            :isImageList="rightImgList"
            v-if="showElImageViewer"
            @onImageViewerCallback="onImageViewerCallback" />
  </div>
</template>
<script>
export default {
  name: 'photo2',
  components: {
  },
  data () {
    return {
      rightImgList: [
        { id: '132', title: '图片名称图片名称1图片名称1图片名称1图片名称1图片名称1', isUrl: require('../../assets/img/001.jpg') },
        { id: '1312', title: '图片名称图片名称1图片名称1图片名称1图片名称1', isUrl: require('../../assets/img/002.jpg') },
        { id: '1', title: '图片名称1', isUrl: require('../../assets/img/01.png') },
        { id: '2', title: '图片名称2', isUrl: require('../../assets/img/02.png') },
        { id: '3', title: '图片名称3', isUrl: require('../../assets/img/600.png') },
        { id: '4', title: '图片名称4', isUrl: require('../../assets/img/1644832145805.png') },
        { id: '11', title: '图片名称1', isUrl: require('../../assets/img/01.png') },
        { id: '22', title: '图片名称2', isUrl: require('../../assets/img/02.png') },
        { id: '33', title: '图片名称3', isUrl: require('../../assets/img/600.png') },
        { id: '44', title: '图片名称4', isUrl: require('../../assets/img/1644832145805.png') },
      ],

      showElImageViewer: false,
      isImageData: {
        imageUrl: '',
        imageTitle: '',
        imageIndex: 0,
      }
    }
  },
  mounted() {
  },
  methods: {
    onImageFn (item, index) {
      this.isImageData.imageUrl = item.isUrl
      this.isImageData.imageTitle = item.title
      this.isImageData.imageIndex = index
      this.showElImageViewer = true
    },

    // 图片回调
    onImageViewerCallback (item) {
      switch (item.type) {
        case 'close':
          this.showElImageViewer = false
          break
        case 'download':
          alert('下载')
          break
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.photo2-main {
  img {
    height: 200px;
    margin-bottom: 10px;
    margin-right: 10px;
    cursor: pointer;
  }
}
</style>